<template>
  <div class="report-task">
    <el-card class="task-card">
      <el-button type="primary" @click="openDialog">新增任务</el-button>
      <el-table :data="tasks" class="task-table" stripe>
        <el-table-column prop="name" label="任务名" />
        <el-table-column prop="ftpUrl" label="FTP地址" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="schedule" label="定时规则" />
        <el-table-column label="收件人">
          <template #default="scope">
            <el-tag
              v-for="email in scope.row.toEmails"
              :key="email"
              size="small"
              style="margin: 2px"
            >
              {{ email }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="抄送人">
          <template #default="scope">
            <el-tag
              v-for="email in scope.row.ccEmails"
              :key="email"
              size="small"
              type="info"
              style="margin: 2px"
            >
              {{ email }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-space>
              <el-button size="small" @click="editTask(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="deleteTask(scope.row)"
                >删除</el-button
              >
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
      <el-form
        :model="taskForm"
        label-width="100px"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="任务名" prop="name">
          <el-input v-model="taskForm.name" />
        </el-form-item>
        <el-form-item label="FTP地址" prop="ftpUrl">
          <el-input
            v-model="taskForm.ftpUrl"
            placeholder="如 ftp://ftp.customer.com/reports"
          />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="taskForm.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="taskForm.password" />
        </el-form-item>
        <el-form-item label="定时规则" prop="schedule">
          <el-input v-model="taskForm.schedule" placeholder="如 0 0 8 * * ?" />
        </el-form-item>
        <el-form-item label="收件人">
          <el-select
            v-model="taskForm.toEmails"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="输入邮箱后回车"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="抄送人">
          <el-select
            v-model="taskForm.ccEmails"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="输入邮箱后回车"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTask">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const tasks = ref([]);

const dialogVisible = ref(false);
const dialogTitle = ref("新增任务");
const formRef = ref(null);

const taskForm = ref({
  id: null,
  name: "",
  ftpUrl: "",
  username: "",
  password: "",
  schedule: "0 0 8 * * ?",
  toEmails: [],
  ccEmails: []
});

const rules = {
  name: [{ required: true, message: "请输入任务名", trigger: "blur" }],
  ftpUrl: [{ required: true, message: "请输入FTP地址", trigger: "blur" }],
  schedule: [{ required: true, message: "请输入定时规则", trigger: "blur" }]
};

function openDialog() {
  dialogTitle.value = "新增任务";
  taskForm.value = {
    id: null,
    name: "",
    ftpUrl: "",
    username: "",
    password: "",
    schedule: "0 0 8 * * ?",
    toEmails: [],
    ccEmails: []
  };
  dialogVisible.value = true;
}

function editTask(row) {
  dialogTitle.value = "编辑任务";
  taskForm.value = { ...row };
  dialogVisible.value = true;
}

function saveTask() {
  formRef.value.validate(valid => {
    if (!valid) return;
    if (taskForm.value.id) {
      const index = tasks.value.findIndex(t => t.id === taskForm.value.id);
      if (index !== -1) tasks.value[index] = { ...taskForm.value };
      ElMessage.success("任务已更新");
    } else {
      taskForm.value.id = Date.now();
      tasks.value.push({ ...taskForm.value });
      ElMessage.success("任务已添加");
    }
    dialogVisible.value = false;
  });
}

function deleteTask(row) {
  tasks.value = tasks.value.filter(t => t.id !== row.id);
  ElMessage.success("任务已删除");
}
</script>

<style scoped>
.report-task {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100%;
}

.task-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.task-table {
  margin-top: 12px;
}
</style>
